/**
 * 价差捕获
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'
import { DataNone} from '../../components'

const PriceDifference=({data})=>{
  const x={
      name:'Spread Capture',
      data:data.map((item, i) => item.spreadCapture)
    },
    y={
      name:'Trade Count'
    },
    myData=[{
      name:'111',
      data:data.map((item, i) => item.count)
    }],
    color=['#ff5b28']

  const myProps={
    option:{
      color:color||['#ff5b28'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        // left: '10%',
        right: '5%',
        bottom: '10%',
        top:'10%',
        width:'85%',
        containLabel: true
      },
      xAxis: [
        {
          name:x.name,
          nameLocation:'middle',
          nameGap:25,
          type: 'category',
          data: x.data,
          axisTick: {
            alignWithLabel: true,
            show:false
          },
          axisLine:{
            show:false
          }
        }
      ],
      yAxis: [
        {
          name:y.name,
          nameLocation:'middle',
          nameGap:40,
          type: 'value',
          axisTick: {
            alignWithLabel: true,
            show:false
          },
          axisLine:{
            show:false
          }
        }
      ],
      series: myData.map((item,i)=>({
        name: item.name,
        type: 'bar',
        barWidth: "40%",
        // itemStyle: {
        //   normal: {
        //     // color: '#ff5b28',
        //     barBorderRadius:10
        //   },
        //   emphasis: {
        //     // color: '#ff5b28',
        //     barBorderRadius:10
        //   }
        // },
        data: item.data
      }))
    }
  }
  return (
    <div className={`chart bar ${style.bar}`}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

PriceDifference.propTypes={
// data
}

export default PriceDifference
